<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/23
  Time: 9:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户信息查询</title>
    <%--    引入jquery资源文件：必须在bootstrap资源文件之前引入--%>
    <script type="text/javascript" src="jquery-1.12.4/jquery-1.12.4.js"></script>
    <%--    引入bootstrap的资源文件--%>
    <script type="text/javascript" src="bootstrap-3.3.6-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap-3.3.6-dist/css/bootstrap.css">
</head>
<body style="margin: 10px;margin: auto">
<%--查询按钮--%>
<button type="button" class="btn btn-default" onclick="doAjaxQuery()">查询</button>
<div style="width: 90%;margin: 10px auto">
    <div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>密码</th>
                <th>地址</th>
                <th>联系电话</th>

            </tr>
            </thead>

            <%--            ajax查询结果集显示的控件--%>
            <tbody id="showData">

            </tbody>
        </table>
    </div>

</div>

</body>
<script type="text/javascript">
    // ajax请求处理函数
    function doAjaxQuery() {
        console.log("正准备执行ajax请求");

// 获取form表单中的输入框控件的值
//         var userName = $("#userName").val(); // 获取指定id的控件对象
//         var userAddress = $("#userAddress").val();
// jquery进行ajax的get请求
        $.ajax({
            type: "post", // 指明request请求类型为post请求
            url: "getUserInfoseByAjax", // 请求的url，form表单的action属性的值
            data: null,// 客户端浏览器发送给服务器端的数据
            dataType: "json", // 指明服务器发回的响应内容的格式 Json【服务器发给ajax引擎的是json字符串，jquery将json字符串转换为json对象】
            success: function (data) { // ajax引擎执行成功之后的回调函数处理【符合条件：xmlhttp.readyState == 4 && xmlhttp.status == 200】
                console.log("ajax查询结果：");
                console.log(data);
// 局部刷新浏览器：使用js操作页面标签对象进行显示【dom操作】
// data 是 json对象
                if (data && data.length > 0) {
// 拼接要显示的内容的html
                    var showDom = "";
// for循环遍历list集合【json数组】
                    for (var i = 0; i < data.length; i++) {
// 取出json数组中的当前遍历的元素对象：json对象【实体类】
                        var eachBean = data[i]; // data.get(i);??? // data[i]
// 将要显示的内容进行html内容拼接
                        showDom += "<tr>";

                        showDom += "<th scope=\"row\">";
                        showDom += (i + 1);
                        showDom += "</th>";

                        showDom += "<td>";
                        showDom += eachBean["username"];
                        showDom += "</td>";

                        showDom += "<td>";
                        showDom += eachBean.userpwd;
                        showDom += "</td>";


                        showDom += "<td>";
                        showDom += eachBean.useraddress;
                        showDom += "</td>";

                        showDom += "<td>";
                        showDom += eachBean.usertel;
                        showDom += "</td>";

                        showDom += "<td>";
                        showDom += " <a href=\"getUserInfoById?id=${eachBean.id}\" class=\"btn btn-primary\" id=\"updata\" >修改</a>\n" +
                            "                <a class=\"btn btn-danger\" id=\"delete\">删除</a>";
                        showDom += "</td>";

                        showDom += "</tr>";
                    }
// 将要显示的html内容，赋值给tbody标签
                    $("#showData").html(showDom);
                }

            }
        });
    }
</script>
</head>

</html>
